<script setup lang="ts">
defineOptions({
  name: "board"
});

import { ref, toRef, nextTick, onMounted, provide, inject, computed, markRaw, type ComponentPublicInstance } from "vue";
import fabBoardModelBoxCommon from "./components/fabBoardModelBoxCommon.vue";
import fabBoardWorkbench from "./components/fabBoardWorkbench/index.vue";
import fabBoardMachine from "./components/fabBoardMachine/index.vue";
import fabBoardElectricity from "./components/fabBoardElectricity/index.vue";
import fabBoardWater from "./components/fabBoardWater/index.vue";
import fabBoardGas from "./components/fabBoardGas/index.vue";
import { getFabAreaSelectOptions, getFabBoardConfigSelectOptions } from "@/api/modules/fab";
import { useElementSize } from "@vueuse/core";
import { useRouterStoreHook } from "@/store/modules/router";

const routerStore = useRouterStoreHook();

const statusChangeInfoRef = ref<HTMLElement>(null);
const { height } = useElementSize(statusChangeInfoRef);

const moduleHeight = computed(() => `${Math.floor((height.value - 32 - 24) / 2)}px`);

provide("moduleHeight", moduleHeight);

// 机台信息 area
// 是否重置 reset
const props = withDefaults(defineProps<{ area: string; reset: boolean }>(), { area: "", reset: false });

const resetRef = toRef(props, "reset");

provide("area", props.area);

const fabBoardComponentMap = new Map([
  [
    "machine",
    {
      code: "machine",
      com: markRaw(fabBoardMachine)
    }
  ],
  [
    "electrictity",
    {
      code: "electrictity",
      com: markRaw(fabBoardElectricity)
    }
  ],
  [
    "water",
    {
      code: "water",
      com: markRaw(fabBoardWater)
    }
  ],
  [
    "gas",
    {
      code: "gas",
      com: markRaw(fabBoardGas)
    }
  ]
]);

const emitBoardAreaEventCb = inject("emitBoardAreaEvent") as Function;

const configOptions = ref<Array<any>>([]);
const areaOptions = ref<Array<any>>([]);
const loading = ref<boolean>(false);
const commonTitle = "动力供应指标";
// 四科动力供应指标 area
const area_2 = ref<string>("");
const className = routerStore.getClassName;
const classCodeDefault = fabBoardComponentMap.get(className?.toLocaleLowerCase()) ? className?.toLocaleLowerCase() : "machine";
const classCode = ref<string>(classCodeDefault);
const ComRef = ref<HTMLElement | ComponentPublicInstance | null>(null);

provide("configOptions", configOptions);
provide("areaOptions", areaOptions);

/**
 * @description: 看板饼图点击事件回调
 * @param {*} type 触发的主体
 * @param {*} data 返回的数据
 * @return {*}
 */
const emitBoardPieAreaEvent = async (type: string, data: any) => {
  switch (type) {
    case "areaCodePie":
      area_2.value = data.areaCode || "ALL";
      await areaChangeHandler(area_2.value, false);
      break;
  }
};

provide("emitBoardPieAreaEvent", emitBoardPieAreaEvent);

const setRef = async (el: HTMLElement | ComponentPublicInstance) => {
  ComRef.value = el;
  await nextTick();
  await ComRef.value?.areaChangeHandler(area_2.value, true);
};

const classCodeChangeHandler = async (val: string, flag: boolean = false) => {};

const areaChangeHandler = async (val: string, flag: boolean = false) => {
  emitBoardAreaEventCb(classCode.value, val);
  await nextTick();
  await ComRef.value?.areaChangeHandler(val, flag);
};

const queryConfigOptionsFn = async () => {
  const res = await getFabBoardConfigSelectOptions(null, () => {
    loading.value = false;
  });
  configOptions.value = res;
};

const queryAreaOptionsFn = async () => {
  const res = await getFabAreaSelectOptions(null, () => {
    loading.value = false;
  });
  areaOptions.value = res
    ?.map(({ areaId: value = "", areaCode: label = "" }: any) => ({ value, label }))
    ?.filter(({ value, label }) => !!value && !!label);
  areaOptions.value.unshift({ value: "ALL", label: "全部区域" });
};

const init = async () => {
  loading.value = true;
  await queryConfigOptionsFn();
  await queryAreaOptionsFn();
  loading.value = false;
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <div ref="statusChangeInfoRef" v-loading="loading" class="fab-board">
    <div class="fab-board-item fab-board-workbench">
      <fabBoardWorkbench :reset="resetRef" />
    </div>

    <div :class="['fab-board-item', 'fab-board-model', `fab-board-${classCode}`]">
      <fabBoardModelBoxCommon
        v-model:classCode="classCode"
        v-model:area="area_2"
        v-model:loading="loading"
        :title="commonTitle"
        @classCodeChange="classCodeChangeHandler"
        @areaChange="areaChangeHandler"
      >
        <div class="fab-board-model-content">
          <transition name="fab-board-model" mode="out-in">
            <component :is="fabBoardComponentMap.get(classCode)?.com" :key="fabBoardComponentMap.get(classCode)?.code" :ref="setRef" />
          </transition>
        </div>
      </fabBoardModelBoxCommon>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fab-board {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-right: 12px;

  .fab-board-item {
    width: 100%;
    margin-bottom: 16px;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  .fab-board-workbench {
    // height: 33.33%;
    // height: 40%;
  }

  .fab-board-model {
    .fab-board-model-content {
      width: 100%;
      height: 100%;

      .fab-board-model-enter-active,
      .fab-board-model-leave-active {
        transition: all 0.4s ease;
      }

      .fab-board-model-enter-from {
        opacity: 0;
        transform: translateX(-120px);
      }

      .fab-board-model-leave-to {
        opacity: 0;
        transform: translateX(120px);
      }
    }
  }

  .fab-board-machine {
    // height: calc(66.67% - 16px);
    // height: 80%;
  }

  .fab-board-electrictity {
    // height: 33.33%;
    // height: 40%;
  }

  .fab-board-water {
    // height: 33.33%;
    // height: 40%;
  }

  .fab-board-gas {
    // height: 99.9%;
    // height: 120%;
  }
}
</style>
